<template>
	<view class="login">
		<image class="bg-top" src="/static/login/2.png"></image>
		<image class="bg-footer" src="/static/login/3.png"></image>
		<view class="login-content">
			<view class="login-title">欢迎回来!</view>
			<view class="login-phone">
				<image src="/static/login/sj.png" mode="widthFix"></image>
				<text class="line"></text>
				<input placeholder="请输入手机号" placeholder-style="color:#000" type="number" value="" />
			</view>
			<view class="login-psw">
				<image src="/static/login/yz.png" mode="widthFix"></image>
				<text class="line"></text>
				<input placeholder="请输入验证码" placeholder-style="color:#000" type="number" value="" />
				<view class="login-send">发送短信</view>
			</view>

			<view @click="onLogin" class="login-button">登录</view>

			<!-- 	<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="login-wechat">
				<image src="../../static/login/wx.png" mode=""></image>
				<text>微信登陆</text>
			</button> -->
			<button @click="handleGetUserInfo" class="login-wechat">
				<image src="../../static/login/wx.png" mode=""></image>
				<text>微信登陆</text>
			</button>
		</view>
	</view>
</template>

<script>
import { wechatLogin } from '@/services/user.js';
export default {
	data() {
		return { code: '' };
	},
	onLoad() {
		uni.login({
			success: resp => {
				console.log(resp)
				this.code = resp.code;
			}
		});
	},
	methods: {
		onLogin() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		async onGetPhoneNumber({ detail }) {
			await wechatLogin(detail);
			console.log(detail);
		},
		async handleGetUserInfo() {
			const resp = await uni.getUserProfile({ desc: '获取用户信息' });
			if (!resp[0]) {
				wechatLogin({
					userInfo: resp[1].userInfo,
					code: this.code
				});
			}
		}
	},
	onShareAppMessage() {}
};
</script>

<style scoped lang="scss">
.login {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.bg-top {
		width: 754rpx;
		height: 594rpx;
		position: fixed;
		right: -87rpx;
		top: -388rpx;
	}
	.bg-footer {
		width: 535rpx;
		height: 594rpx;
		position: fixed;
		bottom: -300rpx;
		left: -200rpx;
	}

	.login-content {
		width: 620rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.login-title {
			font-weight: 600;
			width: 100%;
			font-size: 42rpx;
			margin-bottom: 80rpx;
		}
		.login-phone,
		.login-psw {
			position: relative;
			padding: 0 33rpx 0 33rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin-bottom: 54rpx;
			background: #f8f7fc;
			border: 2rpx solid #e9e9e9;
			font-size: 30rpx;
			border-radius: 54rpx;
			width: 100%;
			display: flex;
			align-items: center;
			image {
				width: 44rpx;
				height: 44rpx;
			}

			.login-send {
				font-size: 26rpx;
				position: absolute;
				right: 20rpx;
				width: 150rpx;
				height: 60rpx;
				top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #5677fc;
				color: #ffffff;
				border-radius: 54rpx;
			}
		}

		.line {
			margin: 0 20rpx;
			height: 40rpx;
			width: 1rpx;
			background-color: #d9d9d9;
		}

		.login-button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			font-size: 30rpx;
			background: #5677fc;
			color: #fff;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 54rpx;
			box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
		}
		.login-wechat {
			margin-top: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				height: 54rpx;
				width: 54rpx;
				margin-right: 20rpx;
			}
		}
	}
}
</style>
